<!-- 对 漂浮 组件的编辑 -->
<template>
  <div class="fixed-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="dlg-main-box menufoot-set">
        <el-tabs v-model="activeName">
          <el-tab-pane label="菜单设置" name="1">
            <MenufootfixedDataSet :dataListP="data.dataList" :loading="loading" ref="menufootfixedDataSet"/>
          </el-tab-pane>
          <el-tab-pane label="样式设置" name="2">
            <MenufootfixedStyleSet :configDataP="data.config" ref="menufootfixedStyleSet"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import MenufootfixedDataSet from '@/components/common/design/dialog/component/menufootfixed/MenufootfixedDataSet.vue'
import MenufootfixedStyleSet from '@/components/common/design/dialog/component/menufootfixed/MenufootfixedStyleSet.vue'
import * as WindowType from '@/config/windowtype.js'
import { mapState } from 'vuex'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import _ from 'lodash'
export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTMENUFOOTFIXED, () => {
      this.close()
      this.dialogShow = true

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
      this.bjComponent = BackendjsFunctions.getComponentMenuFootfixed()
      this.data = this.bjComponent.render.data
      this.loading = false
    })
  },
  mounted () {
  },
  data () {
    return {
      dialogShow: false,
      formLabelWidth: '80px',
      name: '手机端底部菜单设置',
      activeName: '1',
      bjComponent: null,
      data: null,
      loading: true
    }
  },
  watch: {
  },
  methods: {
    close () {
      this.dialogShow = false
      this.bjComponent = null
      this.data = null
      this.loading = true
      this.activeName = '1'
    },
    saveclose () {
      let bool
      bool = this.$refs['menufootfixedDataSet'].validateF()
      if (!bool) {
        return
      }
      let dataList = this.$refs['menufootfixedDataSet'].getDataList()
      let config = this.$refs['menufootfixedStyleSet'].getConfigData()
      this.bjComponent.render.data.dataList = _.cloneDeep(dataList)
      this.bjComponent.render.data.config = _.cloneDeep(config)
      BackendjsFunctions.saveComponentMenuFootfixed(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    MenufootfixedDataSet,
    MenufootfixedStyleSet
  }
}
</script>

<style scoped>
.menufoot-set {
  min-height: 530px;
  min-height: calc(100vh - 300px);
  width: 640px;
}
</style>
